<template>
	<!-- 使用echarts（具体是哪种图形，取决于option的内容） -->
	<div>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="grid-content ep-bg-purple" />
				<div class="elevator-container">
					<div class="outer-ring">
						<div class="inner-ring"></div>
						<div style="font-size: 22px;">{{numdata.values.项目总量}} </div>
					</div>
					<div class="status-text">已接入项目</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="elevator-container">
					<div class="outer-ring">
						<div class="inner-ring1"></div>
						<div style="font-size: 22px;">{{numdata.values.使用中的电梯}}</div>
					</div>
					<div class="status-text">已接入电梯</div>
				</div>
			</el-col>

		</el-row>
	</div>
	<!-- <e-charts class="chart" :option="option" /> -->
	<e-charts class="chart1" :option="option" />
	<e-charts class="chart12" :option="option1" />
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	const numdata = reactive({
		values: {
			"项目总量": 0,
			"使用中的电梯": 0
		}
	})
	import {
		num,
		areaCount
	} from '@/api'
	/* 去官网粘一个option即可 */
// import { useRoute } from 'vue-router'
	// const route = useRoute()
	const username = ref('')
	const option = ref({
		title: {
			text: '地区电梯数量:',
			textStyle: {
				fontSize: 18,
				fontWeight: 'bold',
				color:'#2fe335'
			},
			subtextStyle: {
				fontSize: 12,
				color: '#ec4ead'
			},
			// backgroundColor: '#000084', // 背景色（黄色）
			padding: [10, 20], // 可选：调整内边距
			borderRadius: 5 // 可选：圆角
		},
		xAxis: {
			type: 'category',
			data: []
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [],
			type: 'bar'
		}]
	});

	const l1_1 = () => {
		// username.value = route.query.username || ''
		// let usernames =  localStorage.getItem('username')
		num(username.value).then(r => {
			// console.log(r)
			numdata.values = r.data
			// console.log(123,numdata.values.项目总量 )
		})
	}

	const l1_2 = () => {
		// let usernames =  localStorage.getItem('username')
		areaCount(username.value).then(r => {
			// 转换数据字段名
			const transformedData = r.data
				.filter(item => item.count !== 0) // 过滤掉 count === 0 的项
				.map(item => ({
					name: item.areaName,
					value: item.count
				}));

			console.log(222, transformedData)
			const extractProperty = (array, property) =>
				array
				.filter(item => item.value !== 0) // 过滤掉 value === 0 的项
				.map(item => String(item[property]).slice(0, 2)); // 提取并截取前两个字符
			// 更新图表数据
			option.value = {
				...option.value,
				series: [{
					...option.value.series[0],
					data: transformedData
				}],
				xAxis: {
					type: 'category',
					data: extractProperty(transformedData, 'name')
				},
			}
		})
	}

	onMounted(() => {
		username.value = localStorage.getItem('username')
		l1_1()
		l1_2()
	})



	const option1 = ref({
		// 添加标题配置
		title: {
			text: '电梯使用情况与项目统计',
			subtext: '数据更新至当前日期',
			left: 'center',
			textStyle: {
				fontSize: 18,
				fontWeight: 'bold',
				color:'#2fe335'
			},
			subtextStyle: {
				fontSize: 12,
				color: '#ec4ead'
			}
		},

		// 图例配置（可选）
		legend: {
			orient: 'vertical', // 垂直排列
			right: 20, // 距离右侧20px（原为10，增加间距）
			top: 430, // 垂直居中
			itemGap: 15, // 图例项之间的间隔
			data: ['使用中电梯', '未使用电梯', '项目总数'],

			// 字体样式配置
			textStyle: {
				color: '#333', // 字体颜色（深灰色）
				fontSize: 14, // 字体大小
				fontWeight: 'normal', // 字重（可选：normal/bold/bolder/lighter/100~900）
				fontFamily: 'Microsoft YaHei' // 字体类型（可选）
			},

			// 图例标记和文字的间距
			itemWidth: 25, // 图例标记的宽度
			itemHeight: 14, // 图例标记的高度
			selectedMode: false, // 禁用图例的选中交互

			// 图例背景样式（可选）
			backgroundColor: '#f5f5f5',
			borderColor: '#ddd',
			borderWidth: 1,
			borderRadius: 4,
			padding: [10, 15] // 图例内边距 [上下, 左右]
		},
	

	// 饼图系列配置
	series: [{
		type: 'pie',
		data: [{
				name: '使用中电梯',
				value: 16,
				itemStyle: {
					color: '#5470C6'
				}, // 自定义颜色

			},
			{
				name: '未使用电梯',
				value: 0,
				itemStyle: {
					color: '#EE6666'
				}
			},
			{
				name: '项目总数',
				value: 5,
				itemStyle: {
					color: '#91CC75'
				}
			}
		],
		radius: ['40%', '70%'],
		label: {
			show: true,
			formatter: '{b}: {c} ({d}%)' // 显示名称、值和百分比
		},
		emphasis: { // 高亮样式
			itemStyle: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		}
	}]
	});
</script>

<style scoped>
	/* 我们必须给一个高度/宽度，不然echarts图表无法显示出来 */
	.chart {
		height: 260px;
		width: 430px;
		/* background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); */
		border-radius: 12px;
		box-shadow: 0 0 3px rgba(58, 123, 213, 0.8);
		position: relative;
		overflow: hidden;
	}

	.chart::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		/* background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.1) 75%, 
    transparent 75%, 
    transparent
  ); */
		background-size: 50px 50px;
		animation: moveWave 5s linear infinite;
	}

	@keyframes moveWave {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(25px, 25px);
		}
	}

	.chart1 {
		margin: 20px 0;
		height: 360px;
		width: 430px;
		align-items: center;
		/* background-color: pink; */
	}
	
	.chart12 {
		margin: 20px 0;
		height: 460px;
		width: 430px;
		align-items: center;
		/* background-color: pink; */
	}

	.rotating-image {
		animation: rotate 4s linear infinite;
		/* 其他样式 */
	}

	@keyframes rotateAnimation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.counter-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #0a1a35;
		/* 深蓝色背景 */
		width: 200px;
		padding: 20px;
		border-radius: 8px;
		font-family: Arial, sans-serif;
	}

	.circular-counter {
		position: relative;
		width: 120px;
		height: 120px;
		margin-bottom: 15px;
	}

	/* 外环（深蓝色） */
	.outer-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 8px solid #0d2b5e;
		border-radius: 50%;
	}


	/* 内环（浅蓝色） */
	.inner-ring {
		position: absolute;
		width: 70%;
		height: 70%;
		top: 15%;
		left: 15%;
		/* background: #1a4b8c; */
		border-radius: 50%;
	}

	/* 中心数字 */
	.counter-value {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 32px;
		font-weight: bold;
	}

	/* 底部文字 */
	.counter-label {
		/* color: #00e6ff; */
		/* 青绿色 */
		font-size: 16px;
	}

	.elevator-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200px;
		height: 250px;
		/* background-color: #000; */
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		font-family: Arial, sans-serif;
	}

	.elevator-icon {
		position: relative;
		width: 150px;
		height: 150px;
		margin-bottom: 15px;
	}

	.outer-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator1.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}


	.elevator-container {
		/* position: relative; */
		width: 200px;
		height: 200px;
		/* margin: 0 auto; */
		/* background-color: #000; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.outer-ring {
		width: 150px;
		height: 150px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator1.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.inner-ring {
		width: 93px;
		height: 93px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/elevator2.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		animation: rotate 8s linear infinite;
		/* opacity: 0.6; */
		/* 透明度设置，值范围0-1，0完全透明，1完全不透明 */

	}

	.inner-ring1 {
		width: 93px;
		height: 93px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/item2.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		animation: rotate 8s linear infinite;
		position: absolute;
		/* 添加绝对定位 */
		top: 15%;
		/* 居中定位 */
		left: 15%;
		transform: translate(-50%, -50%);
		/* 精确居中 */
	}

	.status-text {
		/* color: #0066ff; */
		font-size: 18px;
		font-weight: bold;
		margin-top: 10px;
		font-family: Arial, sans-serif;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}


	.status-text {
		color: #1E90FF;
		font-size: 18px;
		font-weight: bold;
		margin-top: 10px;
	}
</style>